<template>
  <div class="visitor-notVisited">
    <div class="search-group">
      <div class="btn-wrap">
        <span style="position: relative">
          <a-button class="searchBtn" type="primary" @click="isShowPopover = true">筛选</a-button>
          <div class="popover" v-if="isShowPopover">
            <div class="search-group">
              <div class="input-wrap">
                <div class="label">选择参数:</div>
                <div class="input-item">
                  <a-select ref="select" allowClear v-model="field" placeholder="请选择参数">
                    <a-select-option value="thickSmoke">油烟数值</a-select-option>
                    <a-select-option value="particleHaze">颗粒度浓度</a-select-option>
                    <a-select-option value="nonMethane">非甲烷气体</a-select-option>
                  </a-select>
                </div>
              </div>

              <div class="input-wrap">
                <div class="label">大于:</div>
                <div class="input-item">
                  <a-input-number clearable v-model="minValue" placeholder="请输入阈值" />
                </div>
              </div>

              <div class="input-wrap">
                <div class="label">小于:</div>
                <div class="input-item">
                  <a-input-number clearable v-model="maxValue" placeholder="请输入阈值" />
                </div>
              </div>

              <div class="btn-group flex justify-around" style="margin-top: 0.1rem; padding: 0 0.2rem">
                <a-button
                  type="primary"
                  class="searchBtn"
                  @click="isShowPopover = false"
                  style="background: #deef35 !important"
                >
                  取消
                </a-button>
                <a-button class="searchBtn" @click="confimFilter()" type="primary">确定</a-button>
              </div>
            </div>
          </div>
        </span>
        <!-- <a-button class="searchBtn" @click="searchQuery()" type="primary">搜索</a-button> -->
        <a-button class="resetBtn" @click="resetFilter" type="primary">重置</a-button>
        <a-button @click="exportExcel('区域排名实时数据')" type="primary" class="exp">导出</a-button>
      </div>
    </div>

    <div>
      <a-table
        rowKey="id"
        class="tableList"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        @change="handleTableChange"
      ></a-table>
    </div>
  </div>
</template>
<script>
import { downFile } from '@/api/manage'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
export default {
  name: 'visitor-notVisited',
  mixins: [JeecgListMixin],
  data() {
    return {
      url: {
        list: '/device/data/find_regional_ranking_page',
        exportXlsUrl: '/device/data/find_regional_ranking_export',
      },
      columns: [
        {
          title: '序号',
          align: 'center',
          width: 60,
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        {
          title: '行政区',
          dataIndex: 'regionName',
          ellipsis: true,
          align: 'center',
        },
        {
          title: '设备数量',
          dataIndex: 'allDeviceCount',
          align: 'center',
          ellipsis: true,
        },
        {
          title: '在线设备',
          dataIndex: 'onlineDeviceCount',
          align: 'center',
          ellipsis: true,
        },
        {
          title: '离线设备',
          dataIndex: 'offDeviceCount',
          align: 'center',
          ellipsis: true,
        },
        {
          title: '油烟浓度平均值(mg/m³)',
          dataIndex: 'thickSmoke',
          align: 'center',
          sorter: true,
          ellipsis: true,
        },
        {
          title: '颗粒物浓度平均值(mg/m³)',
          dataIndex: 'particleHaze',
          align: 'center',
          sorter: true,
          ellipsis: true,
        },
        {
          title: '非甲烷总烃浓度平均值(mg/m³)',
          dataIndex: 'nonMethane',
          align: 'center',
          sorter: true,
          ellipsis: true,
        },
      ],
      field: 'thickSmoke',
      maxValue: '',
      minValue: '',
      isShowPopover: false,
    }
  },

  methods: {
    confimFilter() {
      if (this.maxValue !== '' || this.minValue !== '') {
        this.queryParam.field = this.field
        this.queryParam.minValue = this.minValue
        this.queryParam.maxValue = this.maxValue
        this.searchQuery()
        this.isShowPopover = false
      } else {
        this.isShowPopover = false
      }
    },

    resetFilter() {
      this.field = 'thickSmoke'
      this.maxValue = ''
      this.minValue = ''
      this.queryParam.maxValue = ''
      this.queryParam.minValue = ''
      this.searchQuery()
    },

    getQueryParams() {
      //获取查询条件
      let sqp = {}
      if (this.superQueryParams) {
        sqp['superQueryParams'] = encodeURI(this.superQueryParams)
        sqp['superQueryMatchType'] = this.superQueryMatchType
      }
      if (this.isShowPopover) {
        var param = Object.assign(sqp, this.queryParam, this.filters)
      } else {
        var param = Object.assign(sqp, this.queryParam, this.isorter, this.filters)
      }

      // param.field = this.getQueryField()
      param.pageNo = this.ipagination.current
      param.pageSize = this.ipagination.pageSize

      return param
    },

    exportExcel(fileName) {
      let params = {
        field: this.field,
        minValue: this.minValue,
        maxValue: this.maxValue,
        ...this.isorter,
      }
      this.handleExportXls(fileName, params)
    },

    handleExportXls(fileName, tempParams) {
      if (!fileName || typeof fileName != 'string') {
        fileName = '导出文件'
      }
      let param = this.getQueryParams()
      if (this.selectedRowKeys && this.selectedRowKeys.length > 0) {
        param['selections'] = this.selectedRowKeys.join(',')
      }
      param = { ...tempParams }
      console.log('导出参数', param)
      downFile(this.url.exportXlsUrl, param).then((data) => {
        if (!data) {
          this.$message.warning('文件下载失败')
          return
        }
        if (typeof window.navigator.msSaveBlob !== 'undefined') {
          window.navigator.msSaveBlob(
            new Blob([data], {
              type: 'application/vnd.ms-excel',
            }),
            fileName + '.xls',
          )
        } else {
          let url = window.URL.createObjectURL(
            new Blob([data], {
              type: 'application/vnd.ms-excel',
            }),
          )
          let link = document.createElement('a')
          link.style.display = 'none'
          link.href = url
          link.setAttribute('download', fileName + '.xls')
          document.body.appendChild(link)
          link.click()
          document.body.removeChild(link) //下载完成移除元素
          window.URL.revokeObjectURL(url) //释放掉blob对象
        }
      })
    },
  },
}
</script>
<style lang="less" scoped>
.exp {
  margin-left: 0.1rem;
  width: 0.7rem;
  background: #045053;
  border: 1px solid #017f82;
  font-size: 0.14rem;
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 500;
  color: #00f8ff;
}

.popover {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 10;
  transform: translateY(5%);
  width: 3.2rem;
  background: #076063;
  border: 1px solid #047578;
}
</style>
